<template>
	<div class="page">
		<p class="title">基本用法</p>
		<grButton >默认按钮</grButton>
		<grButton color="primary">主要</grButton>
		<grButton color="success">成功</grButton>
		<grButton color="warn">警告</grButton>
		<grButton color="danger" @click='btnClick'>危险</grButton>
		<grButton color="purple">自定义颜色</grButton>
		<grButton disabled>禁用按钮</grButton>
		<p class="title">扁平化按钮</p>
		<grButton flat color="primary">主要</grButton>
		<grButton flat color="success">成功</grButton>
		<grButton flat color="warn">警告</grButton>
		<grButton flat color="danger">危险</grButton>
		<grButton flat color="purple">自定义颜色</grButton>
		<grButton flat disabled>禁用按钮</grButton>
		<grButton flat :border="false">去边框</grButton>
		<p class="title">圆角按钮</p>
		<grButton round>默认按钮</grButton>
		<grButton round color="primary">主要</grButton>
		<grButton round color="success">成功</grButton>
		<grButton round color="warn">警告</grButton>
		<grButton round color="danger">危险</grButton>
		<grButton round disabled>禁用按钮</grButton>
		<grButton round color="purple">自定义颜色</grButton>
		<p class="title">按钮尺寸</p>
		<grButton size="mini" color="primary">mini</grButton>
		<grButton size="small" color="success">small</grButton>
		<grButton size="medium" color="orange">medium</grButton>
		<grButton size="large" color="danger">large</grButton>
		<p class="title">图标按钮</p>
		<grButton icon>文字按钮</grButton>
		<grButton icon size="medium" color="warn">
			<grIcon name="ashbin" size="20px" color="white"></grIcon>
		</grButton>
		<grButton icon color="purple">
			<grIcon name="ashbin" size="22px" color="white"></grIcon>
		</grButton>
		<grButton icon disabled>
			<grIcon name="ashbin" size="22px" color="#888"></grIcon>
		</grButton>
		<p>
			<grButton color="primary">
				<grIcon name="favorite-filling" color="white" size="16px"></grIcon>
				按钮文字
			</grButton>
			<grButton color="orange">
				按钮文字
				<grIcon name="work-filling" color="white" size="16px"></grIcon>
			</grButton>
		</p>
		<p class="title">loading状态</p>
		<grButton color="primary" size="mini" :loading="miniLoading"
			@click="miniLoading = !miniLoading">mini</grButton>
		<grButton color="success" size="small" :loading="smallLoading"
			@click="smallLoading = !smallLoading">small</grButton>
		<grButton color="warn" :loading="mediumLoading"
			@click="mediumLoading = !mediumLoading">default</grButton>
		<grButton color="danger" size="large" :loading="largeLoading"
			@click="largeLoading = !largeLoading">large</grButton>
		<p class="title">全屏按钮</p>
		<grButton block color="primary">primary</grButton>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				miniLoading: true,
				smallLoading: true,
				mediumLoading: true,
				largeLoading: true
			}
		},
		methods: {
			btnClick(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px 20px;
	}
</style>
